$('#top').load('top.html');
$('#bottom').load('bottom.html');
// ---


// 构造函数; 
// 单词特别多!; 
function Magnifier() {
    // focus 元素 ; 
    this.focus_ele = document.querySelector(".detailHD-focus");
    // 大图盒子;
    this.big_box_ele = document.querySelector(".detailHD-big-img");
    // 小图图片; 
    this.small_img_ele = document.querySelector(".detailHD-small-img img");
    // 小图盒子; 
    this.small_box_ele = document.querySelector(".detailHD-small-img");
    // 大图图片; 
    this.big_img_ele = document.querySelector(".detailHD-big-img img");
    // 按钮盒子; 
    this.button_box_eles = document.querySelectorAll(".detailHD-img-box");

    // 元素宽高这类的属性我们尽可能只取过去一次就行了; 
    this.focus_size = getComputedStyle(this.focus_ele);
    this.big_box_size = getComputedStyle(this.big_box_ele);
    this.small_img_size = getComputedStyle(this.small_img_ele);
    this.small_box_size = getComputedStyle(this.small_box_ele);
    this.big_img_size = {};
    this.init();
    // 计算 focus 的最大值; 
    this.focus_max = {
        left: parseInt(this.small_box_size.width) - parseInt(this.focus_size.width),
        top: parseInt(this.small_box_size.height) - parseInt(this.focus_size.height)
    }
    this.big_max = {
        left: parseInt(this.big_img_size.width) - parseInt(this.big_box_size.width),
        top: parseInt(this.big_img_size.height) - parseInt(this.big_box_size.height)
    }

    this.bindEvent();
}


Magnifier.prototype.init = function () {
    //  大图图片的宽度 (需要计算求得) = 大图盒子的宽度 (固定) * 小图图片的宽度 (固定) / focus(小图上的焦点)宽度(固定) 
    this.big_img_size.width = parseInt(parseInt(this.big_box_size.width) * parseInt(this.small_img_size.width) / parseInt(this.focus_size.width));
    this.big_img_size.height = parseInt(parseInt(this.big_box_size.height) * parseInt(this.small_img_size.height) / parseInt(this.focus_size.height));

    this.big_img_ele.style.width = this.big_img_size.width + "px";
    this.big_img_ele.style.height = this.big_img_size.height + "px";
}

Magnifier.prototype.bindEvent = function () {
    var _this = this;
    this.small_box_ele.onmouseover = function () {
        _this.toggle("show");
    }
    this.small_box_ele.onmouseout = function () {
        _this.toggle("hide");
    }
    this.small_box_ele.onmousemove = function (evt) {
        // 需要鼠标当前光标位置; 
        evt = evt || event;
        _this.follow(evt.offsetX, evt.offsetY);
    }
    // 给所有的盒子都绑定一下事件; 
    for (var i = 0; i < this.button_box_eles.length; i++) {
        this.button_box_eles[i].onclick = function () {
            // _this 是实例对象; 
            // this 当前发生事件的元素; 
            _this.change(this);
        }
    }

}
// toggle 切换 : display属性; 
Magnifier.prototype.toggle = function (type) {
    var attr = type === "show" ? "block" : "none";

    this.focus_ele.style.display = attr;
    this.big_box_ele.style.display = attr;
}
// 跟随功能; 
Magnifier.prototype.follow = function (x, y) {
    // console.log(x,y)
    var _left = x - parseInt(this.focus_size.width) / 2
    var _top = y - parseInt(this.focus_size.height) / 2
    // console.log(_left,_top)
    // 边界检测 *** : 
    // 最小值;  如果位置小于等于最小值，那么就等于最小值; 
    // 最大值;  如果位置大于等于的最大值，那么就等于最大值; 

    _left = _left <= 0 ? 0 : _left;
    _left = _left >= this.focus_max.left ? this.focus_max.left : _left;

    _top = _top <= 0 ? 0 : _top;
    _top = _top >= this.focus_max.top ? this.focus_max.top : _top;

    this.focus_ele.style.left = _left + "px";
    this.focus_ele.style.top = _top + "px";
    // console.log(_left,_top)
    // 位移 : 

    // 计算移动的比例; 
    var left_prop = _left / this.focus_max.left;
    var top_prop = _top / this.focus_max.top;

    this.big_img_ele.style.left = -this.big_max.left * left_prop + "px";
    this.big_img_ele.style.top = -this.big_max.top * top_prop + "px";
}
Magnifier.prototype.change = function (ele) {
    // 1. small_img_ele 的src ; 
    // 2. big_img_ele   的src ; 
    // console.log(ele);
    this.small_img_ele.src = ele.getAttribute("data-small");
    this.big_img_ele.src = ele.getAttribute("data-big");
}

var mag = new Magnifier();
// console.log(mag);   









